import React, { useState } from "react";
import { Button, Modal, Input, Form } from "antd";
import { Map, Marker, NavigationControl, InfoWindow } from "react-bmapgl";
export default function Shop() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [longtitude, setLongtitude] = useState(104.066996);
    const [latitude, setLatitude] = useState(30.674832);
    const [form] = Form.useForm();
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handelOpen = () => {
        setIsModalOpen(true);
    };
    const handleClick = (e) => {
        console.log(e);
        setLongtitude(e.latlng.lng);
        setLatitude(e.latlng.lat);
        form.setFieldValue("longtitude", e.latlng.lng);
        form.setFieldValue("latitude", e.latlng.lat);
    };
    form.setFieldValue("longtitude", longtitude);
    form.setFieldValue("latitude", latitude);
    return (
        <div>
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                autoComplete="off"
            >
                <Form.Item label="经度" name="longtitude">
                    <Input placeholder="输入经度" />
                </Form.Item>
                <Form.Item label="经度" name="latitude">
                    <Input placeholder="输入纬度" />
                </Form.Item>
            </Form>

            <Button type="primary" onClick={handelOpen}>
                打开地图
            </Button>
            <Modal
                title="地图"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Map
                    center={{ lng: longtitude, lat: latitude }}
                    zoom="11"
                    enableScrollWheelZoom={true}
                    style={{ height: "500px" }}
                    onClick={handleClick}
                >
                    <Marker position={{ lng: longtitude, lat: latitude }} />
                    <NavigationControl />
                </Map>
            </Modal>
        </div>
    );
}
